<template>
  <el-drawer
    v-if="node.props"
    :size="drawerWidth()"
    direction="rtl"
    :show-close="true"
    :title="node.name"
    :visible="visible"
    :destroy-on-close="true"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <div slot="title">
      <img :src="branchIcon2" class="anticon"/>
      <span class="flow-ant-drawer-title">
        <EditName v-model="node.name"/>
      </span>
    </div>
    <div class="flow-setting-module">
      <div class="flow-setting-content">
        <div v-if="node.props.attr.showPriorityLevel" class="flow-setting-item">
          <p class="flow-setting-item-title">分支等级</p>
          <el-select v-model="node.props.attr.priorityLevel" :size="size" placeholder="请选择等级"
                     :options="levelOptions" class="w-fill"></el-select>
        </div>
        <div class="flow-setting-item">
          <p class="flow-setting-item-title">分支类型</p>
          <el-radio-group v-model="node.props.branchType">
            <el-radio :value="branchType.value" v-for="(branchType, i) in branchTypes" :key="i"
                      :label="branchType.value">
              {{ branchType.label }}
            </el-radio>
          </el-radio-group>
        </div>
        <div v-if="node.props.branchType == 1" class="flow-setting-item">
          <p class="flow-setting-item-title">条件规则</p>
          <div class="flow-setting-condition-box">
            <div v-for="(group, i) in node.props.conditionGroup" :key="i">
              <div class="flow-setting-condition-group">
                <div class="flow-setting-condition-item" v-for="(condition, k) in group.conditions" :key="k">
                  <el-select v-model="condition.columnValue" :size="size" style="width: 40%" placeholder="字段"
                             @change="handleChange">
<!--                    <el-option-group label="基础字段">-->
<!--                      <el-option :value="column.value" v-for="(column, i) in columns" :key="i" :label="column.label">-->
<!--                        {{ column.label }}-->
<!--                      </el-option>-->
<!--                    </el-option-group>-->
                    <el-option-group label="表单字段">
                      <el-option :value="column.value" v-for="(column, i) in formColumns" :key="i"
                                 :label="column.label">{{ column.label }}
                      </el-option>
                    </el-option-group>
                  </el-select>
                  <div class="flow-setting-condition-option">
                    <!-- 判断(操作)符 -->
                    <FlowSimpleSelect v-model="condition.optType" :name.sync="condition.optTypeName" :datas="optTypes"
                                      labelName="label" style="width: 26%"/>
                    <!-- 值类型 -->
                    <FlowSimpleSelect v-model="condition.valueType" :datas="valueTypes" labelName="label"
                                      style="width: 26%" @change="condition.conditionValue = []"/>
                    <!-- 值 -->
                    <div class="flow-setting-condition-value">
                      <!-- 动态值 -->
                      <FlowSelect
                        v-if="condition.valueType == 2"
                        v-model="condition.conditionValue"
                        :name.sync="condition.conditionValueName"
                        :datas="dynamicValueTypes"
                        labelName="label"
                      />
                      <!-- 流程值 -->
                      <FlowSelect
                        v-else-if="condition.valueType == 3"
                        v-model="condition.conditionValue"
                        :name.sync="condition.conditionValueName"
                        :datas="flowValueTypes"
                        labelName="label"
                      />
                      <!-- 数据源 -->
                      <FlowSelect
                        v-else-if="condition.valueType == 4"
                        v-model="condition.conditionValue"
                        :name.sync="condition.conditionValueName"
                        :datas="columns"
                        labelName="label"
                      />
                      <!-- 固定 -->
                      <FlowInput v-else v-model="condition.conditionValue" :name.sync="condition.conditionValueName"
                                 :size="size"/>
                    </div>
                  </div>
                  <div class="flow-setting-condition-del" @click="delCondition(1, group, condition)">
                    <!--                    <a-icon type="delete" theme="filled" />-->
                    <i class="el-icon-delete" theme="filled"></i>
                  </div>
                </div>
                <div class="flow-setting-condition-add" @click="addCondition(1, group)">
                  <!--                  <a-icon type="plus-circle" theme="filled" />-->
                  <i class="el-icon-circle-plus-outline" theme="filled"></i>
                  <span style="margin-left: 5px">且条件</span>
                </div>
              </div>
              <div v-if="node.props.conditionGroup.length > 1 && i != node.props.conditionGroup.length - 1"
                   class="flow-setting-condition-group-connector">或
              </div>
            </div>
            <div class="flow-setting-condition-add" @click="addGroup(1)">
              <!--              <a-icon type="plus-circle" theme="filled" />-->
              <i class="el-icon-circle-plus-outline" theme="filled"></i>
              <span style="margin-left: 5px">或条件</span>
            </div>
          </div>
        </div>
        <div v-if="node.props.branchType == 2" class="flow-setting-item">
          <p class="flow-setting-item-title">公式规则</p>
          <div class="flow-setting-condition-box">
            <el-input v-model="node.props.expression"></el-input>
          </div>
        </div>
      </div>
    </div>
    {{ node }}
    <FlowDrawerFooter @close="onClose" @save="onSave"/>
  </el-drawer>
</template>
<script>
import {flowMixin} from '../../mixins/flowMixin';
import EditName from '../../common/EditName.vue';
import FlowSelect from '../../Component/FlowSelect.vue';
import FlowSimpleSelect from '../../Component/FlowSimpleSelect.vue';
import FlowInput from '../../Component/FlowInput.vue';
import FlowDrawerFooter from '../../common/DrawerFooter.vue';

export default {
  name: 'FlowBranchSetting',
  components: {EditName, FlowSelect, FlowSimpleSelect, FlowInput, FlowDrawerFooter},
  mixins: [flowMixin],
  data() {
    return {
      node: {},
      visible: false,
      headerStyle: {
        'background-color': '#5ccc98',
        'border-radius': '0px 0px 0 0',
      },
      // 等级
      levelOptions: [],
      branchTypes: [
        {label: '规则', value: 1},
        {label: '公式', value: 2},
        {label: '其他', value: 3},
      ],
      columns: [
        {label: '姓名', value: '姓名'},
        {label: '工号', value: '工号'},
        {label: '部门', value: '部门'},
        {label: 'Base地', value: 'Base地'},
        {label: '所属体系', value: '所属体系'},
        {label: '归属地', value: '归属地'},
      ],
      formColumns: [{label: '加班类型', value: '加班类型'}],
      optTypes: [
        {label: '等于', value: 'eq'},
        {label: '不等于', value: 'ne'},
        {label: '大于', value: 'gt'},
        {label: '大于等于', value: 'ge'},
        {label: '小于', value: 'lt'},
        {label: '小于等于', value: 'le'},
        /*  { label: '为空', value: '7' },
        { label: '不为空', value: '8' }, */
      ],
      // 值类型
      valueTypes: [
        {label: '固定', value: '1'},
        {label: '动态值', value: '2'},
        {label: '流程值', value: '3'},
        /* { label: '数据源', value: '4' }, */
      ],
      // 动态值类型
      dynamicValueTypes: [
        {label: '当前员工', value: '1'},
        {label: '当前员工工号', value: '2'},
        {label: '当前部门', value: '3'},
        {label: '当前组织', value: '4'},
        {label: '下级部门', value: '5'},
        {label: '上级部门', value: '6'},
        {label: '当前日期', value: '7'},
        {label: '当前时间', value: '8'},
      ],
      // 流程值类型
      flowValueTypes: [
        {label: '流程状态', value: '1'},
        {label: '流程创建人', value: '2'},
      ],
      // 表单数据
      dataSourceOptions: [
        {
          value: '1',
          label: '本表单',
          children: [
            {label: '姓名', value: '姓名'},
            {label: '工号', value: '工号'},
            {label: '部门', value: '部门'},
            {label: 'Base地', value: 'Base地'},
            {label: '所属体系', value: '所属体系'},
            {label: '归属地', value: '归属地'},
          ],
        },
      ],
    };
  },
  methods: {
    afterVisibleChange(val) {
      console.log('visible', val);
    },
    showDrawer(node, routeNode) {
      this.visible = true;
      this.node = node;
      // 等级
      if (node.props.attr.showPriorityLevel) {
        this.levelOptions = [];
        routeNode.conditionNodes.forEach((item, index) => {
          let priorityLevel = index + 1;
          this.levelOptions.push({label: '优先' + priorityLevel, value: priorityLevel});
        });
      }
    },
    handleChange() {
    },
    addGroup(type) {
      if (type == 1) {
        this.node.props.conditionGroup.push({
          id: this.uuid(),
          condition: 'OR',
          conditions: [
            {
              id: this.uuid(),
              columnId: '姓名',
              columnName: '姓名',
              columnValue: '姓名',
              columnType: undefined,
              optType: 'eq',
              optTypeName: '等于',
              valueType: '1',
              conditionValue: [],
              conditionValueName: [],
            },
          ],
        });
      }
    },
    addCondition(type, currGroup) {
      if (type == 1) {
        this.node.props.conditionGroup.forEach((group) => {
          if (currGroup.id == group.id) {
            group.conditions.push({
              id: this.uuid(),
              columnId: undefined,
              columnName: undefined,
              columnValue: undefined,
              columnType: undefined,
              optType: undefined,
              optTypeName: undefined,
              valueType: undefined,
              conditionValue: [],
              conditionValueName: [],
            });
          }
        });
      }
    },
    delCondition(type, currGroup, CurrCondition) {
      if (type == 1) {
        this.node.props.conditionGroup.forEach((group, k) => {
          if (currGroup.id == group.id) {
            group.conditions.forEach((condition, index) => {
              if (CurrCondition.id == condition.id) {
                group.conditions.splice(index, 1);
                // 当前组没有条件了，当前组也需要删除
                if (group.conditions.length == 0) {
                  this.node.props.conditionGroup.splice(k, 1);
                }
              }
            });
          }
        });
      }
    },
    onClose() {
      this.visible = false;
      this.$emit('close');
    },
    /**
     * 保存配置
     */
    onSave() {
      // 更新节点显示信息
      let content = '';
      console.log("this.node.props.attr.branchType类型为:"+this.node.props.branchType)
      if (this.node.props.branchType == 1) {
        this.node.props.conditionGroup.forEach((group, j) => {
          if (j != 0) {
            content += ' 或 ';
          }
          if (group.conditions.length > 0) {
            group.conditions.forEach((condition, i) => {
              const conditionValueName = condition.conditionValueName[0];
              if (conditionValueName) {
                if (i != 0) {
                  content += ' 且 ';
                }
                content += '[' + condition.columnValue + ' ' + condition.optTypeName + ' ' + conditionValueName + ']';
              }
            });
          }
        });
      } else if( this.node.props.branchType == 2) {
        content += '公式:['+this.node.props.expression+']';
      } else {
        content += '任意(其他)';
      }
      this.$store.dispatch('process/updateNode', {currNode: this.node, field: 'content', value: null});
      this.$store.dispatch('process/updateNode', {currNode: this.node, field: 'error', value: true});
      if (content) {
        console.info('content', content);
        this.$store.dispatch('process/updateNode', {currNode: this.node, field: 'error', value: false});
        this.$store.dispatch('process/updateNode', {currNode: this.node, field: 'content', value: content});
        this.onClose();
      }
    },
  },
};
</script>
